<template>
<div class="recommend-goods views-container">
    <div class="wlm-table">
        <div class="wlm-table-hearder-btn">
            <choose-goods ref="chooseGoods" :config="chooseGoodsConfig" :changeEvt="filtersChange"></choose-goods>
            <el-button size="small" type="primary" @click="goodsToogle">请选择商品</el-button>
            <p class="orders-gray">只取前面八个商品</p>
        </div>
        <!-- 商圈模态框 -->
        <el-dialog title="绑定商圈" :visible.sync="dialogFormVisible">
            <el-form  :ref="formFormatData.key" :model="formFormatData.formData" size="small" label-width="100px" class="retail-form" label-position="right">
               <el-form-item label="商圈名称" prop="sort_name">
                  <el-select  multiple collapse-tags v-model="formFormatData.formData.express_name"  placeholder="请选择商圈">
                      <el-option
                          v-for="item in modelist"
                          :key="item.circle_id"
                          :label="item.circle_name"
                          :value="item.circle_id"
                          :disabled='item.is_display==2 || item.default==true?true:false'>
                        </el-option>
                  </el-select>
               </el-form-item>
            </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="clickbtn">确 定</el-button>
          </div>
        </el-dialog>
        <!-- <div class="wlm-table-header">
            <el-form :model="tableFormatData.announcement.files" size="small" label-width="80px" class="retail-form" label-position="right">
                <el-form-item label="参数名称：" class="search">
                    <el-input v-model="tableFormatData.announcement.files.title" placeholder="请输入参数名称" style="width:160px;"></el-input>
                </el-form-item>
                <el-form-item label="" class="filter-btns">
                    <el-button v-waves type="primary" @click="filesSerch">筛选</el-button>
                    <el-button type="text" @click="filesEmpty">清空筛选条件</el-button>
                </el-form-item>
            </el-form>
        </div> -->
        <div class="wlm-table-content">
            <el-table :ref="tableFormatData.announcement.key" :data="tableFormatData.announcement.tableData" @selection-change="handleSelectionChange" style="width: 100%">
                <!-- <el-table-column type="selection" width="55">
                </el-table-column> -->
                <el-table-column prop="date" label="排序" min-width="14">
                    <template slot-scope="scope">
                        <el-input-number @blur="changeTableItem({ids:[scope.row.id],goods_id:scope.row.goods_id,sort:scope.row.sort},tableFormatData.announcement.change.sort)" style="width:100%;" size="mini" v-model="scope.row.sort" :controls="false"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="" min-width="30">
                    <template slot-scope="scope">

                    </template>
                </el-table-column>
                <el-table-column prop="name" label="商品图片">
                    <template slot-scope="scope">
                        <img v-if="scope.row.goods&&scope.row.goods.image" height="50" width="50" :src="scope.row.goods.image[0]['file_path']" alt="">
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="商品名称">
                    <template slot-scope="scope">
                        <span v-if="scope.row.goods">{{scope.row.goods.goods_name}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作">
                    <template slot-scope="scope">
                        <div class="operation-group">
                            <el-button class="wlm-text" type="text" @click="deleTableRec(scope.row.id,scope.row.goods_id)">删除</el-button>
                            <el-button class="wlm-text" type="text" @click="district(scope.row)">绑定商圈</el-button>
                        </div>

                    </template>
                </el-table-column>
            </el-table>
            <!-- <div class="pagination-content flex-row flex-justify-e flex-align-c">
                <el-pagination :disabled="!hasTableData" @size-change="listPageChange" @current-change="listPageChange" :current-page.sync="tableFormatData.announcement.pagination.page" :page-sizes="tableFormatData.announcement.pagination.pagesizes" :page-size.sync="tableFormatData.announcement.pagination.list_rows" layout="total, sizes, prev, pager, next, jumper" :total="hasTableData?tableFormatData.announcement.pagination.total : 0">
                </el-pagination>
            </div> -->
        </div>
    </div>
</div>
</template>

<script>
import {
  getRecommendGoods,
  addRecommendGoods,
  delRecommendGoods,
  editRecommendGoods
} from '@/api/merchandise'
import {
  circleAll,
  getRecommendCircle,
  editRecommendCircle
} from '@/api/merchant'
import waves from '@/directive/waves' // Waves directive
import ChooseGoods from '@/components/ChooseGoods/index'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Table'), mixins.getters('Form')],
  name: 'RecommendGoods',
  components: {
    ChooseGoods
  },
  directives: {
    waves
  },
  data() {
    return {
      modelist: [],
      circle_id: '',
      id: '',
      chooseGoodsConfig: {
        type: ['chooseGoods'],
        model: 'normal',
        initList: []
      },
      dialogFormVisible: false,
      formFormatData: {
        key: ['platform'],
        api: {
          editForm: {
            api: addRecommendGoods,
            params: {
            //   always: true
            },
            filters: {
              choose: {
                bindInit: ['chooseGoodsConfig']
              }
            }
          },
          submitForm: addRecommendGoods
        },
        formData: {
          recommendGoods: [],
          express_name: []
        },
        rules: {
        }
      },
      tableFormatData: {
        current: 'announcement',
        announcement: {
          key: 'announcement',
          api: {
            getList: getRecommendGoods,
            delList: delRecommendGoods
          },
          tableData: [],
          files: {
            ids: [],
            checkall: '0'
          },
          change: {
            sort: {
              name: '排序',
              key: 'sort',
              api: editRecommendGoods
            }
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
    }
  },
  methods: {
    filtersChange(val) {
      this.currentRow = val.currentRow
      const displayData = val.displayData
      let tableLength = this.tableFormatData.announcement.tableData.length
      displayData.map(item => {
        var hasIndex = this.tableFormatData.announcement.tableData.findIndex(tableItem => {
          return tableItem.goods_id === item.goods_id
        })
        if (hasIndex === -1 && tableLength < 8) {
          console.log(this.tableFormatData.announcement.tableData.length, 'length')
          tableLength = tableLength + 1
          this.formFormatData.formData.recommendGoods.push({ image: item.image[0]['file_path'], goods_name: item.goods_name, goods_id: item.goods_id, goods_price: item.goods_min_price })
        }
        console.log(this.formFormatData.formData.recommendGoods)
      })
      if (this.formFormatData.formData.recommendGoods.length > 0) {
        this.formFormatSubmit()
        setTimeout(() => {
          this.filesSerch()
          this.formFormatData.formData.recommendGoods = []
        }, 500)
      }
    },
    goodsToogle() {
      this.$refs.chooseGoods.toggle()
    },
    deleTableRec(id, goods_id) {
      delRecommendGoods({ ids: [id], goods_id }).then(res => {
        const { data: { code } } = res
        if (code === 1) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.filesSerch()
        }
      })
    },
    getCircleRec() { // 商圈接口
      circleAll({}).then(res => {
      //  console.log(res,'res99999999999999999')
        this.modelist = res.data.data
        console.log('this.modelist', this.modelist)
      })
    },
    getRecommendCircleRec() {
      getRecommendCircle({ id: this.id }).then(res => {
        // const { data: { msg, code } } = res

        this.formFormatData.formData.express_name = res.data.data.map(res => {
          return res.circle_id
        })
        //  this.formFormatData.formData.express_name = res.data.data
      })
    },
    district(row) {
      console.log(row, 'row')
      this.circle_id = row.circle_id
      this.id = row.id
      this.dialogFormVisible = true
      this.getCircleRec()
      console.log('this.circle_id', this.circle_id)
      this.getRecommendCircleRec()
    },
    clickbtn() {
      this.dialogFormVisible = false
      editRecommendCircle({ id: this.id, circle_id: this.formFormatData.formData.express_name }).then(res => {
        const { data: { msg, code } } = res
        if (code == 1) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        } else {
          this.$message.error(msg)
        }
      })
    }
  },
  created() {

  }
}
</script>

<style lang="scss" scoped>
.platform-package {}
</style>
